import React, { useImperativeHandle, useRef, useState } from 'react';
import { intl } from '@/utils';
import Popup from 'devextreme-react/popup';
import Form, { SimpleItem } from 'devextreme-react/form';



export const PhaseLnputDialog: React.FC<any> = React.forwardRef((props: any, ref) => {
  const diaParams = useRef<any>();
  const [twoVisible, setTwoVisible] = useState<boolean>(false);

  const oKDataForm = useRef<any>();
  const [formAllData, setFormAllData] = useState<any>({
    OKData: '',
  });

  useImperativeHandle(ref, () => ({
    show: async (params: any) => {
      diaParams.current = params;
      setTwoVisible(true)
      setFormAllData({
        OKData: ''
      });
    },
    close: () => { setTwoVisible(false) }
  }));

  const validationRules = {
    OKData: [
      { type: 'required', message: '请输入OK后才能完成操作！' },
      {
        type: "async",
        message: "请输入OK后才能完成操作！",
        validationCallback: async (item: any) => {
          const result = item.value === 'OK';
          if (result) {
            return true;
          }
          return false;
        },
      },
    ]
  }

  return (
    <Popup
      {...props}
      width={400}
      height={300}
      // dragOutsideBoundary={true}
      resizeEnabled={true}
      visible={twoVisible}
      title={intl('pro.PopupModal.SelectComponent', '确定提醒')}
      onHiding={() => {
        setTwoVisible(false);
      }}
      toolbarItems={[
        {
          widget: 'dxButton',
          toolbar: 'bottom',
          location: 'after',
          options: {
            text: intl('pub.cancel', '取消'),
            onClick: () => {
              setTwoVisible(false);
            }
          },
        },
        {
          widget: 'dxButton',
          toolbar: 'bottom',
          location: 'after',
          options: {
            text: intl('pub.ok', '确定'),
            type: 'default',
            validationGroup: "formAllDataData",
            onClick: async () => {
              if (oKDataForm.current) {
                const devForm: Form = oKDataForm.current as Form;
                const result: any = await devForm.instance.validate().complete;
                if (result && result.isValid && result.status === "valid") {
                  setTwoVisible(false)
                  if (diaParams.current?.okCallback) {
                    diaParams.current?.okCallback(true)
                  }
                }
              }
            }
          },
        },
      ]}
      contentRender={() =>
        <>
          <div>
            <p>确定要执行 (<span style={{ color: 'red' }}>{diaParams.current?.args?.title}</span>)吗？</p>
            <p><span style={{ color: 'red', fontSize: '16px' }}>{diaParams.current?.args?.content || "警告！此行为同步后会覆盖项目当前成果"}</span></p>
            <p>确定要执行,请您输入OK</p>
          </div>

          <Form
            ref={oKDataForm}
            formData={formAllData}
            labelLocation={"left"}
            labelMode={"outside"}
            focusStateEnabled={true}
            readOnly={false}
            showColonAfterLabel={true}
            alignItemLabels={true}
          >
            <SimpleItem dataField="OKData" label={{ text: '输入OK' }} validationRules={validationRules.OKData} />
          </Form>
        </>
      }
    />
  );
})

export default PhaseLnputDialog;
